﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SolidPic.aspx.cs" Inherits="WebSite.cn.SolidPic" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
   
<meta charset="gb2312" />
		
  	 <link rel="stylesheet" type="text/css"  href="css/global.css"  />
		<!-- Attach necessary JS -->
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
		<script type="text/javascript" src="/js/slides.min.jquery.js"></script>	
        
                <style type="text/css">
                     
                     .alphaValue
                     {
                         opacity:0.6;
                          filter:alpha(opacity=60);
                         }
                 
                </style>
	
        <script>
            $(function () {
                $('#slides').slides({
                    preload: true,
                    preloadImage: 'img/loading.gif',
                    play: 10000,
                    pause: 2500,
                    hoverPause: true,
                    animationStart: function (current) {
                        $('.caption').animate({
                            bottom: -35
                        }, 100);
                        if (window.console && console.log) {
                            // example return of current slide number
                            console.log('animationStart on slide: ', current);
                        };
                    },
                    animationComplete: function (current) {
                        $('.caption').animate({
                            bottom: 0
                        }, 200);
                        if (window.console && console.log) {
                            // example return of current slide number
                            console.log('animationComplete on slide: ', current);
                        };
                    },
                    slidesLoaded: function () {
                        $('.caption').animate({
                            bottom: 0
                        }, 200);
                    }
                });
            });
	</script>
		


</head>
<body >
    <form id="form1" runat="server" >
   <div style=" float:left; margin-top:10px;  width:744px; height:518px;">



 <div id="slides"  onmouseover="viewArrawImage()" onmouseout="hiddArrawImage()" >
				<div class="slides_container" >
					
                       <div class="slide">
                     <div style=" background-image:url('img/A4.jpg'); width:970px; height:400px; " >
                      </div>
                    </div>  
                   <div class="slide">
                     <div style=" background-image:url('img/A1.jpg'); width:970px; height:400px; " >
                      </div>
                    </div>  
                          <div class="slide">
                     <div style=" background-image:url('img/A2.jpg'); width:970px; height:400px; " >
                      </div>
                    </div>  
                         <div class="slide">
                     <div style=" background-image:url('img/A3.jpg'); width:970px; height:400px; " >
                      </div>
                    </div>  
                         <div class="slide">
                     <div style=" background-image:url('img/A5.jpg'); width:970px; height:400px; " >
                      </div>
                    </div>  
                          <div class="slide">
                     <div style=" background-image:url('img/A6.jpg'); width:970px; height:400px; " >
                      </div>
                    </div>   
                       
                     
		
				</div>
                <div>
				<a  href="#" class="prev" ><img id="imgArrwowPrev"  src="img/bgNull.gif" alt="Arrow Prev"></a>
				<a href="#" class="next"><img id="imgArrwowNext"  src="img/bgNull.gif" alt="Arrow Next"></a>
                </div>
			</div>




            <input type="hidden" id="hidValue" value="" />
			
            <script type="text/javascript" >
                function setDivDisplay(id) {

                    if ($("#" + id).css("display") == "none") {

                        $("#" + id).css("display", "block");
                    } else {

                        $("#" + id).css("display", "none");
                    }
                }

                function viewArrawImage() {

                    $("#imgArrwowPrev").attr("src", "img/left-arrow.png");
                    $("#imgArrwowNext").attr("src", "img/right-arrow.png");
                }

                function hiddArrawImage() {
                    $("#imgArrwowPrev").attr("src", "img/bgNull.gif");
                    $("#imgArrwowNext").attr("src", "img/bgNull.gif");
                    // $("#aArrwowPrev").html('');
                }
            </script>   
    </div>
    </form>
</body>
</html>
